<template>
  <!-- 基础题库 -->
  <div class='container'>
    <el-card>
      <!-- 第一行 -->
      <el-row style="margin-bottom:15px">
        <el-col :span="12" class="text">说明：目前支持学科和关键字条件筛选</el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('/questions/new')">{{$t("table.addTest")}}</el-button>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-form ref="form" label-width="80px">
        <el-row>
        <el-col :span="6" >
          <el-form-item :label="$t('route.subjectsList')">
            <el-select v-model="request.subjectID" placeholder="请选择" @change="subjectChange">
              <el-option
                v-for="item in subjectsList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.SecondaryDirectory')">
            <el-select v-model="request.catalogID" placeholder="请选择">
              <el-option
                v-for="item in catalogList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.tags')">
            <el-select v-model="request.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.keyword')">
            <el-input v-model="request.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.testType')">
            <el-select v-model="request.questionType" placeholder="请选择">
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="(item.value).toString()">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.difficulty')">
            <el-select v-model="request.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="(item.value).toString()">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.direction')">
            <el-select v-model="request.direction" placeholder="请选择">
              <el-option
                v-for="item in directionList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.enterPeople')">
            <el-select v-model="request.creatorID" placeholder="请选择">
              <el-option
                v-for="item in creatorList"
                :key="item.id"
                :label="item.username"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('table.remarks')">
            <el-input v-model="request.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('table.EnterpriseName')">
            <el-input v-model="request.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.city')">
            <el-select @change="provinceChange" v-model="request.province" placeholder="请选择" style='width:48%;margin-right:5px'>
              <el-option
                v-for="item in provinceList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select v-model="request.citys" placeholder="请选择" style='width:49%'>
              <el-option
                v-for="item in citysList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button size="small" @click="clear">{{$t("route.reset")}}</el-button>
          <el-button type="primary" size="small" @click="search">{{$t("table.search")}}</el-button>
        </el-col>
      </el-row>
      </el-form>
      <!-- 提示 -->
      <el-alert
        type="info"
        :closable="false"
        show-icon>
        <template slot="title">
          数据一共{{total}}条
        </template>
      </el-alert>
      <!-- 标签列表 -->
      <el-table
       :header-cell-style="{background:'#FAFAFA'}"
        fit
        highlight-current-row
        v-loading="loading"
        element-loading-text="给我一点点时间"
        :data="questionsList"
        style="width: 100%">
        <el-table-column
          prop="number"
          :label="$t('table.testNumber')"
          width="120">
        </el-table-column>
        <el-table-column
          prop="subject"
          :label="$t('route.subjectsList')"
          >
        </el-table-column>
        <el-table-column
          prop="catalog"
          :label="$t('route.directorys')"
          >
        </el-table-column>
        <el-table-column
          prop="questionType"
          :label="$t('route.testType')">
          <template slot-scope="{row}">
            <span v-if="row.questionType-0===1">单选</span>
            <span v-else-if="row.questionType-0===2">多选</span>
            <span v-else-if="row.questionType-0===3">简答</span>
          </template>
        </el-table-column>
        <el-table-column
         :label="$t('table.stem')"
          width="280">
          <template slot-scope="{row}">
            <div  v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
         :label="$t('table.date')"
          width="180">
          <template slot-scope="{row}">
            {{row.addDate | format}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
         :label="$t('route.difficulty')">
          <template slot-scope="{row}">
            <span v-if="row.difficulty-0===1">简单</span>
            <span v-else-if="row.difficulty-0===2">一般</span>
            <span v-else-if="row.difficulty-0===3">困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
         :label="$t('route.enterPeople')">
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          width="180"
          >
          <template slot-scope="{row}">
            <el-button title="预览" size="small" type="primary" plain icon="el-icon-view" circle @click="preview(row)"></el-button>
            <el-button title="修改" size="small" type="success" plain icon="el-icon-edit" circle @click="$router.push({path:'/questions/new',query:{id:row.id}})"></el-button>
            <el-button title="删除" @click="deleteQuestion(row)" size="small" type="danger" plain icon="el-icon-delete" circle></el-button>
            <el-button title="加入精选" @click="toChoice(row)" size="small" type="warning" plain icon="el-icon-check" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="text-align: right">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="questions.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="questions.pagesize"
        background
        layout="  prev, pager, next,sizes, jumper"
        :total="total">
        </el-pagination>
      </el-row>
    </el-card>
    <subjectPreview
      :subjectId='selectId'
      v-model="subjectShow"
    ></subjectPreview>
  </div>
</template>

<script>
import { list, choiceAdd, remove } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { simple as userSimple } from '@/api/base/users.js'
import subjectPreview from '@/components/subjectPreview'
export default {
  name: 'questions',
  components: {
    subjectPreview
  },
  data () {
    return {
      value: '',
      options: [],
      total: 0,
      questions: {
        page: 1, // 当前页
        pagesize: 5// 每页显示条数
      },
      questionsList: [],
      difficultyList: difficulty, // 难度
      questionTypeList: questionType, // 试题类型
      directionList: direction, // 方向
      provinceList: provinces(), // 所在地省份
      citysList: [], // 所在城市
      subjectsList: [], // 学科列表
      catalogList: [], // 目录列表
      tagsList: [], // 标签列表
      creatorList: [], // 录入人列表
      request: {
        difficulty: '', // 难度
        questionType: '', // 试题类型
        direction: '', // 方向
        province: '', // 所在地省份
        citys: '', // 所在城市
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        keyword: '', // 关键字
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签名称
        creatorID: ''// 录入人
      },
      selectId: '',
      subjectShow: false, // 预览弹层
      loading: true

    }
  },
  created () {
    this.loadQuestionsList()
    this.loadSubjectsList()
    this.loadcreatorList()
  },
  methods: {
    // 获取基础列表
    async loadQuestionsList () {
      const data = { ...this.questions }
      try {
        for (var k in this.request) {
          if (this.request[k] !== '') {
            data[k] = this.request[k]
          }
        }
        const res = await list(data)
        this.loading = false
        this.questionsList = res.data.items
        this.total = res.data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 获取学科列表
    async loadSubjectsList () {
      const res = await simple()
      this.subjectsList = res.data
    },
    // 录入人列表
    async loadcreatorList () {
      const res = await userSimple()
      this.creatorList = res.data
    },

    // 每页条数改变触发
    handleSizeChange (val) {
      this.questions.pagesize = val
      this.loadQuestionsList()
    },
    // 当前页改变触发
    handleCurrentChange (val) {
      this.questions.page = val
      this.loadQuestionsList()
    },
    // 所在省份发生变化
    provinceChange () {
      this.citysList = citys(this.request.province)
    },
    // 学科发生改变触发
    async subjectChange () {
      const res = await directorysSimple({
        subjectID: this.request.subjectID
      })
      this.catalogList = res.data
      const res2 = await tagsSimple({
        subjectID: this.request.subjectID
      })
      this.tagsList = res2.data
    },
    // 清除
    clear () {
      this.request = {
        difficulty: '', // 难度
        questionType: '', // 试题类型
        direction: '', // 方向
        province: '', // 所在地省份
        citys: '', // 所在城市
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        keyword: '', // 关键字
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签名称
        creatorID: ''// 录入人
      }
      this.citysList = []
      this.catalogList = []
      this.tagsList = []
      this.loadQuestionsList()
    },
    // 搜索
    async search () {
      this.loadQuestionsList()
    },
    // 加入精选
    toChoice (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        try {
          await choiceAdd({
            id: row.id,
            choiceState: 1
          })
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.loadQuestionsList()
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 删除基础题
    async deleteQuestion (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          if (this.questionsList.length === 1 && this.questions.page !== 1) {
            this.questions.page--
          }
          await remove({
            id: row.id
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadQuestionsList()
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 预览
    preview (row) {
      this.subjectShow = true
      this.selectId = row.id
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  padding: 10px;
  .text{
    font-size: 12px;
    color: pink;
  }
  .el-select{
    width: 100%;

  }
  .el-table{
    margin: 15px 0;
  }
}
</style>
